<template>
  <div class="main-content">
    <!--收货地址-->
    <div class="AddressAdministration">
      <div class="AddressAdministration-header">
        <div>
          <div @click="open">
            <div><el-icon style="
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            font-size: 18px;
            color: #999;
          "><Plus /></el-icon></div>
            <span>新增收货地址</span>
          </div>
        </div>
      </div>
      <div class="AddressAdministration-main">
        <ul v-show="data.site.length!==0">
          <li>
            <div class="AddressAdministration-main-address">
              <div class="overstriking">收件人</div>
              <div class="overstriking">手机号</div>
              <div class="overstriking">收货地址</div>
            </div>
            <div class="AddressAdministration-main-icon">
              <div class="overstriking">操作</div>
            </div>
          </li>
          <li v-for="(item,index) in data.site" :key="item">
            <div class="AddressAdministration-main-address">
              <div>{{ item.name }}</div>
              <div>{{ item.phone }}</div>
              <div>{{ item.address }}</div>
            </div>
            <div class="AddressAdministration-main-icon">
              <div v-show="Boolean(item.tacitlyApprove)" class="patientia">默认</div>
              <el-icon @click="modification(index)" style="margin-left: 22px;color: #999;font-size: 20px;cursor: pointer;"><Edit /></el-icon>
              <el-icon @click="addressRemove(index)" :plain="true" style="margin-left: 22px;color: #999;font-size: 20px;cursor: pointer;"><Delete /></el-icon>
            </div>
          </li>
        </ul>
        <div v-show="data.site.length===0" class="bottom-main-content">
          <div>
            <img src="/images/personalCenter/noOrder.png">
            <p>暂无收货地址</p>
          </div>
        </div>
      </div>
    </div>
    <!--收货地址弹窗-->
    <div class="mask" v-show="data.flag">
      <div :class="['mask-content',data.isRemove===false?'mask-flag':'']">
        <div class="mask-content-body">
          <el-form v-show="data.isRemove===true" :model="form" label-width="120px">
            <div class="close">
              <el-icon @click="close"><Close /></el-icon>
            </div>
            <div>
              <h3>添加地址</h3>
            </div>
            <!--收件人-->
            <div>
              <el-input v-model="form.recipients" @blur="recipientsBlue" maxlength="6" placeholder="收件人" />
              <div v-show="data.recipientsFlag" class="hint">
                <span>{{data.recipientsMsg}}</span>
              </div>
            </div>
            <!--手机号-->
            <div>
              <el-input @blur="phoneBlue" v-model="form.phone" placeholder="手机号" />
              <div v-show="data.phoneFlag" class="hint">
                <span>{{data.phoneMsg}}</span>
              </div>
            </div>
            <!--地址三级联动-->
            <div>
              <div class="personalData-form-inp el-form-item-inp">
                <el-select @change="province" v-model="form.province" placeholder="请选择">
                  <el-option v-for="(item,index) in data.province" :key="item.name" :label="item.name" :value="item.name" />
                </el-select>
                <el-select @change="city" v-model="form.city" placeholder="请选择">
                  <el-option v-for="item in data.city" :key="item.name" :label="item.name" :value="item.name" />
                </el-select>
                <el-select v-model="form.district" placeholder="请选择">
                  <el-option v-for="item in data.district" :label="item" :value="item" />
                </el-select>
              </div>
            </div>
            <!--地址提示-->
            <div>
              <el-input @blur="defaultAddressBlue" v-model.trim="form.defaultAddress" placeholder="详细地址" maxlength="120"
                        @input="btnAH"/>
              <div v-show="data.defaultAddressFlag" class="hint">
                <span>{{ data.defaultAddressMsg }}</span>
              </div>
            </div>
            <!--设为默认地址-->
            <div class="default">
              <el-checkbox v-model="form.tacitlyApprove" label="设为默认地址" size="large" />
            </div>
            <!--确定-->
            <div class="confirm">
              <el-button :plain="true" @click="onSubmit">确定</el-button>
            </div>
          </el-form>
          <div v-show="data.isRemove===false" class="rem">
            <h3>确定删除该地址</h3>
            <div>
              <el-button @click="enThink">再想想</el-button>
              <el-button @click="enRemove">确定</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, computed, onMounted, getCurrentInstance, watch, ref} from 'vue';
import { ElMessage } from 'element-plus';
import store from "../../../store";
//解析proxy
const { proxy } = getCurrentInstance();
//form表单数据
let form = reactive({
  //收件人
  recipients:'',
  //电话
  phone:'',
  //详细地址
  defaultAddress:'',
  //是否默认
  tacitlyApprove:'',
  //省市区
  province:'',
  //市
  city:'',
  //区
  district:'',
})
const data = reactive({
  flag:'',
  //三级联动数组
  province : [],
  //地址数组
  site:[],
  //收件人
  recipientsFlag:false,
  recipientsMsg:'请输入联系人',
  //手机号
  phoneFlag:false,
  phoneMsg:'请输入手机号',
  //详细地址
  defaultAddressFlag:false,
  defaultAddressMsg:'请输入详细地址',
  i:'',
  modificationFlag:'',
  isRemove:'',
  n:''
})
//获取后端的数据
onMounted(()=>{
  data.province = store.state.province;
  proxy.$get("/api/PersonalCenter/addressAdministration", {})
      .then((date)=>{
        data.site=date;
  })
})
//收件人失去焦点
let recipientsBlue = ()=>{
  if (form.recipients===''){
    data.recipientsFlag = true;
  }else {
    data.recipientsFlag = false;
  }
}
//手机号失去焦点
let phoneBlue = ()=>{
  console.log(form.phone);
  if (form.phone===''){
    data.phoneMsg = '请输入手机号';
    data.phoneFlag = true;
  }else if (/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/ig.test(form.phone)){
    data.phoneFlag = false;
  }else if (/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/ig.test(form.phone)===false){
    data.phoneMsg = '请输入正确的手机号格式';
    data.phoneFlag = true;
  }
}
//地址
let btnAH=()=>{
  let AH = /^[\u4E00-\u9FA5|a-zA-Z|0-9]+$/
  if (AH.test(form.defaultAddress)){

  }else{
    form.defaultAddress = form.defaultAddress.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, "");
    ElMessage({
      message: '当前输入的为特殊字符，不可用',
      type: 'error',
    })
  }
}
//详细地址
let defaultAddressBlue = ()=>{
  if (form.defaultAddress===''){
    data.defaultAddressFlag=true;
  }else {
    data.defaultAddressFlag=false;
  }
}
//删除地址
let addressRemove = (index)=>{
  data.flag = true;
  data.n=index;
  data.isRemove = false;
}
//点击修改
let modification = (index)=>{
  data.isRemove = true;
  data.modificationFlag = true;
  //下标
  data.i = index;
  //清除弹窗
  data.flag = true;
  //赋值
  form.recipients = data.site[index].name;
  form.phone = data.site[index].phone;
  form.province = data.site[index].addressProvince;
  form.city = data.site[index].addressCity;
  form.district = data.site[index].addressDistrict;
  form.defaultAddress = data.site[index].addressDefaultAddress;
  form.tacitlyApprove = Boolean(data.site[index].tacitlyApprove);
  //
  //
  let p = data.province.findIndex((item,index)=>{
    return item.name === form.province;
  })
  data.provinceIndex = p;
  data.city=data.province[data.provinceIndex].city;
  //
  let c = data.city.findIndex((item,index)=>{
    return item.name === form.city;
  })
  data.cityIndex = c;
  data.district = data.city[data.cityIndex].districtAndCounty;
}
//地址三级联动
let province = ()=>{
  //遍历三级联动数组
  let i = data.province.findIndex((item,index)=>{
    return item.name === form.province
  })
  data.provinceIndex = i;
  //遍历当前选中的市
  data.city=data.province[data.provinceIndex].city;
  //点击省时清空
  form.city='';
  form.district = '';
}
//城市
let city = ()=>{
  let i = data.city.findIndex((item,index)=>{
    return item.name === form.city
  })
  data.cityIndex = i;
  data.district = data.city[data.cityIndex].districtAndCounty;
  form.district = '';
}
//确定
const onSubmit = () => {
  if (form.recipients===''||form.phone===''||form.province===''||form.city===''||form.district===''||form.defaultAddress===''){
    ElMessage({
      message: '内容不能为空',
      type: 'error',
    })
  }else if(data.phoneFlag||data.defaultAddressFlag){
    ElMessage({
      message: '内容格式不对',
      type: 'error',
    })
  } else {
    //修改确定
    if (data.modificationFlag){
      //赋值
      data.site[data.i].name= form.recipients;
      data.site[data.i].phone = form.phone;
      data.site[data.i].addressProvince = form.province;
      data.site[data.i].addressCity = form.city;
      data.site[data.i].addressDistrict = form.district;
      data.site[data.i].addressDefaultAddress = form.defaultAddress;
      data.site[data.i].address = form.province+form.city+form.district+form.defaultAddress;
      data.site[data.i].tacitlyApprove = Number(form.tacitlyApprove);
      data.modificationFlag = false;
      data.flag = false;
      let modificationFlag = data.site[data.i];
      let codeModification = 400;
      //发送请求修改后端
      proxy.$get("/api/PersonalCenter/addressAdministration", {...modificationFlag,codeModification})
          .then((date)=>{

          })
      ElMessage({
        message: '地址修改成功',
        type: 'success',
      })
      if (form.tacitlyApprove){
        data.site.forEach((item)=>{
          item.tacitlyApprove = false;
        })
        data.site[data.i].tacitlyApprove = true;
      }
      //清空
      form.recipients = '';
      form.phone = '';
      form.defaultAddress = '';
      form.tacitlyApprove = '';
      form.province = '';
      form.city = '';
      form.district = '';
      //添加确定
    }else {
      //创建obj
      let obj = {
        id:data.site.length+1,
        name:form.recipients,
        phone:form.phone,
        address:form.province+form.city+form.district+form.defaultAddress,
        addressProvince:form.province,
        addressCity:form.city,
        addressDistrict:form.district,
        addressDefaultAddress:form.defaultAddress,
        tacitlyApprove:Number(form.tacitlyApprove),
        //添加
        codeAdd:200
      };
      proxy.$get("/api/PersonalCenter/addressAdministration", {...obj})
          .then((date)=>{
            data.site=date;
            console.log(data.site);
          })
      data.flag = false;
      data.site.push(obj);
      //清空
      form.recipients = '';
      form.phone = '';
      form.defaultAddress = '';
      form.tacitlyApprove = '';
      form.province = '';
      form.city = '';
      form.district = '';
      ElMessage({
        message: '地址添加成功',
        type: 'success',
      })
    }
  }
}
//打开添加地址
let open = ()=>{
  data.flag = true;
  data.isRemove = true;
}
//关闭添加地址
let close = ()=>{
  data.flag = false;
  data.phoneFlag = false;
  data.recipientsFlag = false;
  data.defaultAddressFlag = false;
  data.modificationFlag = '';
  form.recipients = '';
  form.phone = '';
  form.defaultAddress = '';
  form.tacitlyApprove = '';
  form.province = '';
  form.city = '';
  form.district = '';
}
//点击删除
let enRemove =()=>{
  data.flag = false;
  //发送给后端的数据
  let n = data.site[data.n];
  let codeRemove = 300;
  //发送get请求
  proxy.$get("/api/PersonalCenter/addressAdministration", {...n,codeRemove})
      .then((date)=>{

      })
  //删除
  data.site.splice(data.n,1);
  ElMessage({
    message: '地址删除成功',
    type: 'success',
  })
}
//取消
let enThink = ()=>{
  data.flag = false;
}
</script>

<style lang="less" scoped>
.main-content {
  width: 1034px;
  height: 100%;
  .AddressAdministration {
    box-sizing: border-box;
    box-shadow: 0 0 10px 0 #eaeaea;
    padding: 35px 50px;
    min-height: 100%;
    //头部
    .AddressAdministration-header {
      div {
        display: flex;
        justify-content: flex-end;
        cursor: pointer;
        div {
          display: flex;
          align-items: center;
          div {
            display: inline-block;
            position: relative;
            width: 22px;
            height: 22px;
            border: 1.5px solid #999;
            border-radius: 50%;
          }
          span {
            font-size: 18px;
            margin-left: 10px;
          }
        }
      }
    }
    //地址内容
    .AddressAdministration-main {
      margin-top: 35px;
      border-top: 1px solid #e0e0e0;
      font-size: 14px;
      padding-top: 55px;
      //订单内容
      .bottom-main-content {
        text-align: center;
        margin-top: 36px;
        padding-bottom: 58px;
        padding-right: 55px;
        padding-left: 55px;
        div {
          img {
            width: 138px;
            height: 138px;
            margin: 0 auto;
          }
          p {
            text-align: center;
          }
        }
      }
      ul {
        li {
          display: flex;
          justify-content: space-between;
          margin-bottom: 55px;
          .overstriking {
            font-size: 16px;
            font-weight: bolder;
          }
          .AddressAdministration-main-address {
            display: flex;
            div {
              min-width: 134px;
              margin-right: 40px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
            div:first-child {
              width: 80px;
            }
            div:last-child {
              width: 300px;
            }
          }
          .AddressAdministration-main-icon {
            display: flex;
            div {
              width: 65px;
            }
            .patientia {
              color: #ff0101;
              border: 1.5px solid #ff0101;
              border-radius: 4px;
              width: 36px;
              font-weight: 700;
              text-align: center;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  //弹出框
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.6);
    z-index: 999;
    //display: none;
    .mask-flag {
      min-width: 440px!important;
    }
    .mask-content {
      max-width: 680px;
      min-width: 550px;
      padding: 40px 65px;
      position: absolute;
      left: 50%;
      top: 50%;
      background: #fff;
      border-radius: 2px;
      transform: translate(-50%,-50%);
      text-align: center;
      .mask-content-body {
        width: 100%;
        background: #fff;
        border-radius: 2px;
        text-align: center;
        font-size: 14px;
        .rem {
          box-sizing: border-box;
          min-width: 440px;
          h3 {
            line-height: 24px;
            font-size: 18px;
            color: #303133;
          }
          div {
            display: flex;
            justify-content: space-between;
            .el-button {
              width: 164px;
              height: 40px;
            }
          }
        }
        div {
          position: relative;
          margin: 10px 0;
          .el-input {
            height: 50px;
          }
          h3 {
            padding: 0;
            margin-bottom: 40px;
            font-size: 22px;
          }
          .personalData-form-inp {
            .el-input {
              height: 50px;
            }
            input {
              width: 100%;
              height: 50px;
              padding: 0 25px;
              box-sizing: border-box;
              background-color: #fff;
              border-radius: 4px;
              border: 1px solid #dcdfe6;
            }
            .el-select {
              width: 165px;
              /deep/ .el-input__inner {
                height: 50px;
              }
            }
          }
          .el-form-item-inp {
            display: flex;
            justify-content: space-between;
          }
        }
        .hint {
          position: absolute;
          bottom: -20px;
          span {
            text-align: left;
            color: red;
            font-size: 12px;
          }
        }
        .confirm {
          display: flex;
          justify-content: start;
          /deep/ .el-button {
            width: 100%;
            height: 50px;
          }
        }
        .close {
          /deep/ .el-icon {
            position: absolute;
            right: -42px;
            top: -36px;
            font-size: 34px;
            color: #909399;
            cursor: pointer;
          }
        }
        .default {
          display: flex;
          justify-content: start;
        }
        .example-block {
          display: flex;
          justify-content: start;
          /deep/ .el-cascader {
            width: 100%;
            /deep/ input {
              height: 50px;
            }
          }
        }
      }
    }
  }
}
</style>